import React, { Component } from "react";
import './index.css'

const timg = require("../img/timg.png");

let img = new Image();
img.src = timg;

export default class CanvasCom extends Component {
    // ratio = null;
    ctx = null;

    wid = 320;
    hei = 568;
    packedArr = [];
    density = {
        max: 3,
        min: 1
    }; //密度
    speed = 3; //下落速度

    packPrice = -1;

    state ={
        timer : 15,
        total : 0,
        showOne:0,
    };

    clearTime = null

    componentDidMount() {
        this.wid = window.innerWidth;
        this.hei = window.innerHeight;
        this.initCanvas();
        this.start();
    }

    getPixelRatio = context => {
        let backingStore =
            context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio ||
            1;
        return (window.devicePixelRatio || 1) / backingStore;
    };

    canvasHandle = event => {
        // console.log(event)

        this.packPrice = 0;
        let x = event.clientX;
        let y = event.clientY;
        this.packedArr.forEach((item, index) => {
            // console.log(item)
            let leftX = x - item.x;
            let topY = y - item.y;
            // console.log(leftX,topY)
            if (
                // leftX >= 0 &&
                // leftX <= 50 * this.ratio &&
                // topY >= 0 &&
                // topY <= 50 * this.ratio
                leftX >= 0 &&
                leftX <= 50  &&
                topY >= 0 &&
                topY <= 50
            ) {
                this.setState({
                    showOne:1,
                })

                // console.log(item)
                this.state.total += item.price;
                this.setState({
                    total:this.state.total+item.price
                })
                this.packPrice = item.price;
                setTimeout(() => {
                    this.packPrice = -1;
                }, 700);
                this.packedArr.splice(index, 1);
                setTimeout(()=>{
                    this.setState({
                        showOne:0
                    })
                },500)
            }
        });


    };
    initCanvas() {
        const canvas = document.getElementById("canvas");
        canvas.onclick = this.canvasHandle;
        canvas.width = this.wid;
        canvas.height = this.hei;
        // console.log(canvas);
        if (canvas.getContext) { // 判断是否有此方法，如果有才能进入
            console.log("canvas.getContext",canvas.getContext)
            this.ctx = canvas.getContext("2d");
            // this.ratio = this.getPixelRatio(this.ctx);
        }
    }
    drawPacked = () => {
        //绘制红包
        let that = this;
        // console.log(this.packedArr)
        this.packedArr.forEach((item, index) => {
            const newPacked = {
                x: item.x,
                y: item.y + that.speed,
                img: img,
                price: item.price
            };
            this.packedArr.splice(index, 1, newPacked);
            this.ctx.drawImage(
                img,
                item.x,
                item.y,
                50,
                50
            );
        });
    };
    movePacked = () => {
        //执行动画帧
        this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
        let arr = this.packedArr.filter((item, index) => {
            return item.y <= window.innerHeight;
        });
        this.packedArr = arr;
        // console.log(arr)
        this.drawPacked();
        window.requestAnimationFrame(this.movePacked);
    };
    pushPackArr = () => {
        //创建红包数据 放红包的数量
        const random = Math.floor(
            Math.random() * (this.density.max - this.density.min) +
                this.density.min
        );
        let arr = [];
        // console.log(random)
        for (let i = 0; i < random; i++) {
            const newPack = {
                // x: Math.random() * (window.innerWidth - 50 * this.ratio),
                x: Math.random() * (window.innerWidth - 50 ),
                y: 0,
                img: img,
                price: parseInt(Math.random() * 10)
            };
            arr.push(newPack);
            // console.log(arr)
        }
        this.packedArr = [...this.packedArr, ...arr];
        if(this.state.timer>0){
            this.setState({
                timer:this.state.timer-1
            })
            this.clearTime = setTimeout(() => {
                this.pushPackArr();
            }, 1000);
        }else {
            clearTimeout(this.clearTime)
        }

    };
    start = () => {
        //执行动画
        this.pushPackArr();
        this.movePacked();
    };

    render() {
        return (
            <div>
                <div className="wrapContent">
                    <div className="calcCount">倒计时{this.state.timer}s</div>
                    <div className="totalMoney">金币:{this.state.total}</div>
                    {
                        this.state.showOne?<div className="addOne">+1</div>:null
                    }
                    <canvas id='canvas'></canvas>
                </div>
            </div>

    );
    }
}
